<template>
  <!-- 图书展示 -->
  <div class="goods-item" v-if="goods.id">
    <router-link :to="`/detail?id=${goods.id}`">
      <Image :src="goods.cover_url" />
    </router-link>
    <p>{{ goods.title }}</p>
    <div class="goods-detail">
      <!-- 销量 -->
      <div class="goods-price">
        ￥<span style="color: red">{{ goods.price }}</span>
      </div>
      <!-- 收藏 -->
      &nbsp;&nbsp;
      <span
        ><i class="iconfont icon-shoucang"></i> {{ goods.collects_count }}</span
      >
    </div>
  </div>
</template>

<script>
import { Image } from 'vant'
export default {
  name: 'GoodsItem',
  components: { Image },
  props: {
    goods: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

<style scoped lang='less'>
.goods-item {
  display: inline-block;
  width: 50vw;
  p {
    text-align: center;
    padding-bottom: 5px;
  }
  .goods-detail {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
